<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>上传信息</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        form {
            width: 500px;
            border: 1px solid rgba(0, 0, 0, 0.7);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            margin: 100px auto;
        }

        form > div {
            margin: 15px 0;
            padding: 0 50px;
        }

        input[type='text'] {
            width: 300px;
            height: 30px;
        }

        .categary {
            width: 300px;
            height: 30px;
        }

        input[type='radio'] {
            margin: 0 10px;
        }

        input[type='submit'],
        input[type='button'] {
            width: 100px;
            height: 30px;
            border: 1px solid rgba(0, 0, 0, 0.5);
            color: white;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 5px;
        }

        form > div:last-child {
            text-align: right;
        }

        #photo1 {
            width: 70px;
            height: 70px;
            vertical-align: middle;
            margin-left: 20px;
        }

        #photo2 {
            width: 70px;
            height: 70px;
            vertical-align: middle;
            margin-left: 20px;
        }

        #photo3 {
            width: 70px;
            height: 70px;
            vertical-align: middle;
            margin-left: 20px;
        }

        /*隐藏   上传按钮*/

        #file1 {
            display: none;
        }

        #file2 {
            display: none;
        }

        #file3 {
            display: none;
        }

        #file4 {
            display: none;
        }

        #Mybutton {

        }


    </style>
</head>

<body>
<!--在文件上传时form表单的数据传输方式必须为post，并且编码格式必须为multipart/form-data，否则服务器端是无法获取传输的文件数据-->
<form id="uploadForm" enctype="multipart/form-data">
    <div style="height: 30px;text-align: center">
        {% if msg %}
            <p style="color:red;">
                {{ msg }}
            </p>
        {% endif %}
    </div>

    <div>
        图片:
        <label for="file1">
            <img src="/static/image/default1.jpeg" id="photo1">
        </label>
        <input type="file" id="file1" name="file1" multiple>
        <input type="hidden" id="file11" name="file11" >
        <label for="file2">
            <img src="/static/image/default1.jpeg" id="photo2">
        </label>
        <input type="file" id="file2" name="file2" multiple>
        <input type="hidden" id="file22" name="file22" >

        <label for="file3">
            <img src="/static/image/default1.jpeg" id="photo3">
        </label>
        <input type="file" id="file3" name="file3" multiple>
        <input type="hidden" id="file33" name="file33" >
    </div>
    <div>
        <label>标题:</label>
        <input type="text" id="title" name="title" >
    </div>
    <div>
        <label>内容:</label>
        <input type="text" id="content" name="content">
    </div>
    <div>
        <label>姓名:</label>
        <input type="text" id="name" name="name">
    </div>
    <div>
        <label>电话:</label>
        <input type="text" id="phone" name="phone">
    </div>
    <div>
        <label>状态:</label>
        <select name="status" class="categary">
            <option value="寻找中">寻找中</option>
            <option value="已找到">已找到</option>
            <option value="其他">其他</option>
        </select>
    </div>
    <div>
        <input type="button" value="提交" onclick="uploadFile()">
    </div>
</form>
</body>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function uploadFile() {
        var formData = new FormData($("#uploadForm")[0]);
        console.log(formData);
        // 进行文件数据的上传
        $.ajax({
            async: false,
            cache: false,
            url: '/user/uploadFindGood/',
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            success: function (result) {
                if (result.Code == 200) {
                    var urls = result.pic;
                    document.getElementById("photo1").src = urls[0];
                    document.getElementById("photo2").src = urls[1];
                    document.getElementById("photo3").src = urls[2];
                    alert('上传成功！');
                }
                ;
                if (result.Code == 500) {
                    alert(result.msg);
                }
                ;
            },
        });
    }

    //上传之前预览图片1
    $('#file1').on('change', function () {
            var filePath = $(this).val(), //获取到input的value，里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
            src = window.URL.createObjectURL(this.files[0]); //通过文件的URL创建可以在本地预览的格式

        // 通过文件格式检查是否是图片
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            alert('上传错误,文件格式必须为：png/jpg/jpeg');
            return;
        }

        $('#photo1').attr('src', src);
    });

    //2
    $('#file2').on('change', function () {
        var filePath = $(this).val(), //获取到input的value，里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
            src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式

        // 检查是否是图片
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            alert('上传错误,文件格式必须为：png/jpg/jpeg');
            return;
        }

        $('#photo2').attr('src', src);
    });

    //3
    $('#file3').on('change', function () {
        var filePath = $(this).val(), //获取到input的value，里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
            src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式

        // 检查是否是图片
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            alert('上传错误,文件格式必须为：png/jpg/jpeg');
            return;
        }
        $('#photo3').attr('src', src);
    });

</script>
</html>